import { AddSvg, AiV1Svg, CloseSvg, DataSetSvg, DeleteSvg, DoubleArrowV1Svg, DownArrowSvg, EditSvg, FullTextSvg, MixV1Svg, ModelV1Svg, MoreSvg, SearchFilteringSvg, SearchModeSvg, SemanticSvg, SimpleAppSvg, SvgQuest } from "@/app/assets/CustomizeSvg";
import { OperationType, SaveStatus, WorkbenchesType } from "@/service/general/enumType";
import { useMainContentContext } from "@/service/general/publicStatic";
import { ApplicationData, KnowledgeBaseModal } from "@/service/request/modal/dataModal";
import { CreateApplicationModal, CreateThirdApplication, NewCreateApplicationModal, NewCreateThirdApplication } from "@/service/request/modal/requestModal";
import { ResponseModal, ResponseSingleModal } from "@/service/request/modal/responseModal";
import { createApplication, createThirdApplication, getApplicationModels, getKnowledgeBaseList, getThirdApplicationType, sendTestMsg, updateApplication } from "@/service/request/requestApi";
import { InputNumber, message, Popover, Slider } from "antd";
import { ReactNode, useCallback, useEffect, useRef, useState } from "react";

import "./workbenchesdetail.css";
import { BaseModal } from "@/service/general/modal/common";
import { merge } from "lodash";
import { WorkbenchesTabProps } from "@/service/general/modal/MenuModal";
import { getActiveCheckItem } from "@/component/CustomizeCheckInput";


interface SearchMode {
    id: string | number;
    icon: ReactNode | string;
    title: string;
    desc: string;
    value: string;
}

const SearchModes: SearchMode[] = [{
    id: 1,
    icon: <SemanticSvg width={`100%`} height={`100%`} />,
    title: "语义检索",
    desc: "使用向量进行文本相关性查询",
    value: "embedding"
},{
    id: 2,
    icon: <FullTextSvg width={`100%`} height={`100%`} />,
    title: "全文检索",
    desc: "使用传统的全文检索，适合查找一些关键词和主谓语特殊的数据",
    value: "fullTextRecall"
},{
    id: 3,
    icon: <MixV1Svg width={`100%`} height={`100%`} />,
    title: "混合检索",
    desc: "使用向量检索与全文检索的综合结果返回，使用 RRF 算法进行排序。",
    value: "mixedRecall"
}];

interface ParamType extends BaseModal {
    type: "ParamType",
    saveStatus: SaveStatus,
    isActive: boolean,
    isEditAppName: boolean,
    isEditIntro: boolean,
    editMode: OperationType,
    searchMode: SearchMode,
    shuttleLeft: KnowledgeBaseModal[],
    shuttleRight: KnowledgeBaseModal[],
    localParam?: CreateApplicationModal,
    thirdParam?: CreateThirdApplication
}

const NewParamType = (data: Omit<ParamType, "type">):ParamType => { 
    return {
        type: "ParamType",
        ...data
    };
}

const SAVE_TEXT: Record<SaveStatus, string> = {
    [SaveStatus.EDITED]: "已编辑",
    [SaveStatus.SAVED]: "已保存"
}

const emptyLocalParam: CreateApplicationModal = NewCreateApplicationModal({
    name: "",
    model: "",
    prompt: "",
    maxImport: "",
    minAbout: "",
    datasetIds: "",
    checkModel: "",
});

const emptyThirdParam: CreateThirdApplication = NewCreateThirdApplication({
    name: "",
    appType: "",
    appUrl: "",
    appKey: "",
})

const WorkbenchesDetail = ({data, operationType, menuData}: {data?: ApplicationData, operationType: OperationType, menuData: WorkbenchesTabProps}) => {
    const {goBack} = useMainContentContext();
    const appNameInput = useRef<HTMLInputElement>(null);
    const [models, setModels] = useState<string[]>();
    const [initData, setInitData] = useState<boolean>(false);
    // const [isEditAppName, setIsEditAppName] = useState<boolean>(false);
    const [showModelSelection, setShowModelSelection] = useState<boolean>(false);
    const [showSearchMode, setShowSearchMode] = useState<boolean>(false);
    const [paramList, setParamList] = useState<ParamType[]>([]);
    const [activeIndex, setActiveIndex] = useState<number>(0);

    const [interfaceTypes, setInterfaceTypes] = useState<{key: string, value: string}[]>([]);

    const [showInterfaceType, setShowInterfaceType] = useState<boolean>(false);

    // const [activeParam, setActiveParam] = useState<ParamType>();

    // const [param, setParam] = useState<CreateApplicationModal>({
    //     id: data?.id,
    //     name: data?.name || "",
    //     model: data?.model || "",
    //     prompt: data?.prompt || "",
    //     maxImport: data?.maxImport || "",
    //     minAbout: data?.minAbout || "",
    //     datasetIds: data?.datasetIds || "",
    //     checkModel: data?.checkModel || "",
    // });

    const [allDataset, setAllDataset] = useState<KnowledgeBaseModal[]>([]);
    // const [shuttleLeft, setShuttleLeft] = useState<KnowledgeBaseModal[]>([]);
    // const [shuttleRight, setShuttleRight] = useState<KnowledgeBaseModal[]>([]);

    // const [searchMode, setSearchMode] = useState<SearchMode>(SearchModes[0]);

    const tips = "模型固定的引导词，通过调整该内容，可以引导模型聊天方向。该内容会被固定在上下文的开头。\n如果关联了知识库，你还可以通过适当的描述，来引导模型何时去调用知识库搜索。例如：你是电影《星际穿越》的助手，当用户询问与《星际穿越》相关的内容时，请搜索知识库并结合搜索结果进行回答。";
    const maxImportModel = {
        min: 100,
        max: 120000,
        step: 1500
    };
    const minAboutModel = {
        min: 0,
        max: 1,
        step: 0.01
    }
    const maxAppKeyLength = 200;

    useEffect(() => {
        Initialize();
    });

    const Initialize = () => {
        if (!initData) {
            setInitData(true);
            checkData();
            loadData();
        }
    }

    const checkData = () => {
        console.log(data);
        if (operationType !== OperationType.NEW) {
            if (!data || !data.id || data.id.length <= 0) {
                message.error("无效应用");
                goBack();
                return;
            }
        }
    }

    const loadData = () => {
        if (menuData.type === WorkbenchesType.LOCAL) {
            initParamList();
            getModels();
            getDataset();
        } else if (menuData.type === WorkbenchesType.THIRD) {
            initThirdParamList();
            getThirdType();
        }
    }

    const initParamList = (left?: KnowledgeBaseModal[], right?: KnowledgeBaseModal[]) => {
        let checkModel = SearchModes[0];
        if (data?.checkModel) {
            checkModel = SearchModes.find(item => item.value === data.checkModel) || checkModel;
            // setSearchMode(checkModel);
        }
        // const {left, right}:{left: KnowledgeBaseModal[], right: KnowledgeBaseModal[]} = {left: [], right: []};
        const initParam:ParamType = NewParamType({
            saveStatus: SaveStatus.SAVED,
            isActive: true,
            isEditAppName: false,
            isEditIntro: false,
            editMode: operationType,
            searchMode: checkModel,
            shuttleLeft: left || [],
            shuttleRight: right || [],
            localParam: NewCreateApplicationModal({
                id: data?.id,
                name: data?.name || "",
                intro: data?.intro || "",
                model: data?.model || "",
                prompt: data?.prompt || "",
                maxImport: data?.maxImport || "",
                minAbout: data?.minAbout || "",
                datasetIds: data?.datasetIds || "",
                checkModel: data?.checkModel || "",
            })});
        // setActiveParam(initParam);
        if (paramList.find(item => item.localParam?.id === initParam.localParam?.id)) {
            console.log("update param");
            setParamList(list => [...list.map(item => {
                if (item.localParam?.id === initParam.localParam?.id) {
                    return merge({}, {...initParam}, {...item});
                }
                return item;
            })]);
        } else {
            console.log("add param");
            setParamList(list => [{...initParam}, ...(list.filter(item => item.localParam?.id !== initParam.localParam?.id))]);
        }
    };

    const getModels = () => {
        getApplicationModels().then((res: ResponseModal<string>) => {
            if (res.code === 200 && res.success) {
                setModels(res.result);
            } else if (res.message && res.message.length > 0) {
                message.error(res.message);
            }
        }).catch((err) => {
            console.log("获取模型失败", err);
        });
    }

    const getDataset = () => {
        getKnowledgeBaseList().then((res: ResponseModal<KnowledgeBaseModal>) => {
            if (res.code === 0 && res.success) {
                const datasets = res.result || [];
                setAllDataset(datasets);
                if (datasets && datasets.length > 0) {
                    const {left, right} = initShuttle(datasets);
                    initParamList(left, right);
                    // handleValueChange({index: 0, key: "", value: ""});
                    return;
                }
            }
        }).catch((err) => {
            console.log("获取知识库失败", err);
        }).finally(() => {
        });
    }

    const initThirdParamList = () => {
        const initParam:ParamType = NewParamType({
            saveStatus: SaveStatus.SAVED,
            isActive: true,
            isEditAppName: false,
            isEditIntro: false,
            editMode: operationType,
            searchMode: SearchModes[0],
            shuttleLeft: [],
            shuttleRight: [],
            thirdParam: NewCreateThirdApplication({
                id: data?.id,
                intro: data?.intro || "",
                name: data?.name || "",
                appType: data?.appType || "",
                appUrl: data?.appUrl || "",
                appKey: data?.appKey || "",
                isTsoar: data?.isTsoar || false,
                prompt: data?.prompt || "",
            })
            });
        setParamList([{...initParam}]);
    }

    const getThirdType = () => {
        getThirdApplicationType().then((res: ResponseSingleModal<string>) => {
            if (res.code === 200 && res.success && res.result) {
                const result = Object.entries(res.result).map(([key, value]) => ({key, value}));
                console.log(result.length);
                setInterfaceTypes([...result]);
            } else {
                message.error(res.message || "获取接口类型失败");
            }
        }).catch((err) => {
            console.log("获取接口类型失败", err);
        });
    }

    const initShuttle = (datas: KnowledgeBaseModal[]): {left: KnowledgeBaseModal[], right: KnowledgeBaseModal[]} => {
        const rightData = initShuttleRight(datas);
        const leftData = initShuttleLeft(rightData, datas);
        // setShuttleRight(rightData);
        // setShuttleLeft(leftData);
        return {left: leftData, right: rightData};
    }

    const initShuttleLeft = (rightData: KnowledgeBaseModal[] | undefined, datas: KnowledgeBaseModal[]) => {
        if (!rightData || rightData.length <= 0) return datas;
        const shuttleData = datas.filter((item) => !rightData.includes(item));
        return shuttleData;
    }

    const initShuttleRight = (datas: KnowledgeBaseModal[]) => {
        if (!data?.datasetIds || data.datasetIds.length <= 0) return datas;
        const ids = data.datasetIds;
        const shuttleData = datas.filter((item) => !ids.includes(item.id));
        return shuttleData
    }

    const moveShuttleRight = (moveItem: KnowledgeBaseModal) => {
        if (!paramList[activeIndex].localParam) return;
        const left = [...paramList[activeIndex].shuttleLeft.filter((item) => item.id !== moveItem.id)];
        const right = [...paramList[activeIndex].shuttleRight, moveItem];
        // setShuttleLeft(left);
        // setShuttleRight(right);
        const ids = paramList[activeIndex].localParam.datasetIds.split(",").filter((item) => item !== moveItem.id).join(",");
        // setActiveParam({
        //     ...activeParam,
        //     // datasetIds: [...param.datasetIds.filter((item) => item !== moveItem.id)]
        //     datasetIds: ids.trim().replace(/^,+|,+$/g, '')
        // });
        handleLocalParam({index: activeIndex, key: "datasetIds", value: ids.trim().replace(/^,+|,+$/g, ''), left, right});
    }

    const moveShuttleLeft = (moveItem: KnowledgeBaseModal) => {
        if (!paramList[activeIndex].localParam) return;
        if (paramList[activeIndex].shuttleLeft.length > 0) {
            const tmp = paramList[activeIndex].shuttleLeft[0];
            if (tmp.vectorModel !== moveItem.vectorModel) {
                message.warning("仅能选择同一个索引模型的知识库");
                return;
            }
        }
        const left = [...paramList[activeIndex].shuttleLeft, moveItem];
        const right = [...paramList[activeIndex].shuttleRight.filter((item) => item.id !== moveItem.id)];
        
        // setShuttleRight(left);
        // setShuttleLeft(right);
        const ids = [...paramList[activeIndex].localParam.datasetIds.split(","), moveItem.id].join(",");
        // setActiveParam({
        //     ...activeParam,
        //     // datasetIds: [...param.datasetIds, moveItem.id]
        //     datasetIds: ids.trim().replace(/^,+|,+$/g, '')
        // });
        handleLocalParam({index: activeIndex, key: "datasetIds", value: ids.trim().replace(/^,+|,+$/g, ''), left, right});
    }

    const handleValueChange = (index: number ,e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const {name, value} = e.currentTarget || e.target;
        if (menuData.type === WorkbenchesType.LOCAL) {
            handleLocalParam({index: index, key: name,value: value});
        } else if (menuData.type === WorkbenchesType.THIRD) {
            handleThirdParam({updateIndex: index, key: name,value: value});
        }
    }

    const handleLocalParam = (
        {index, key, value, left, right, searchMode, saved}: 
        {
            index: number, 
            key?: string, 
            value?: string, 
            left?: KnowledgeBaseModal[], 
            right?: KnowledgeBaseModal[],
            searchMode?: SearchMode,
            saved?: SaveStatus
        }
    ) => {
        let param: ParamType = {
            ...paramList[index],
            searchMode: searchMode? searchMode : paramList[index].searchMode,
            shuttleLeft: left ? left : paramList[index].shuttleLeft,
            shuttleRight: right ? right : paramList[index].shuttleRight,
        };
        if (key && paramList[index].localParam) {
            param = {
                ...param,
                localParam: key ? {
                    ...paramList[index].localParam,
                    [key]: value
                } : {...paramList[index].localParam}
            }
        }
        // setActiveParam(param);
        updateLocalParamList(index, param);
    }

    const updateLocalParamList = (updateIndex: number, newParam: ParamType | CreateApplicationModal) => {
        let param: ParamType;
        if (!newParam) return;
        if (newParam.type === "CreateApplicationModal") {
            param = {
                ...paramList[updateIndex],
                localParam: newParam,
            }
        } else {
            param = newParam;
        }
        setParamList(list => list.map((item, index) => (index === updateIndex ? param : item)));
    }

    const handleThirdParam = ({updateIndex, key, value}: {updateIndex: number, key: string, value: any}) => {
        if (!paramList[updateIndex].thirdParam) return;
        const param: ParamType = {
            ...paramList[updateIndex],
            thirdParam: {
                ...paramList[updateIndex].thirdParam,
                [key]: value
            }
        }
        setParamList(list => list.map((item, index) => (index === updateIndex ? param : item)));
    }

    const addParamList = (newParam: ParamType | CreateApplicationModal | CreateThirdApplication) => {
        let param: ParamType;
        if (!newParam) return;
        if (newParam.type === "CreateApplicationModal") {
            param = NewParamType({
                saveStatus: SaveStatus.EDITED,
                isActive: false,
                isEditAppName: false,
                isEditIntro: false,
                editMode: OperationType.NEW,
                searchMode: SearchModes[0],
                shuttleLeft: [],
                shuttleRight: [...allDataset],
                localParam: {...newParam},
            });
        } else if (newParam.type === "CreateThirdApplication") {
            param = NewParamType({
                saveStatus: SaveStatus.EDITED,
                isActive: false,
                isEditAppName: false,
                isEditIntro: false,
                editMode: OperationType.NEW,
                searchMode: SearchModes[0],
                shuttleLeft: [],
                shuttleRight: [...allDataset],
                thirdParam: {...newParam},
            });
        } else {
            param = {...newParam};
        }
        setParamList(list => ([...list, param]));
    }

    const removeParamList = (deleteIndex: number) => {
        // if (activeIndex === deleteIndex) setActiveIndex(0);
        if (activeIndex >= deleteIndex) {
            let index = activeIndex - 1;
            if (index > (paramList.length - 1)) {
                index = paramList.length - 1;
            }
            setActiveIndex(index);
            // if (activeIndex === deleteIndex) {
            //     setActiveParam(paramList[index]);
            // }
        }
        setParamList(list => (list.filter((item, index) => (index !== deleteIndex))));
    }

    const changeActive = (changeIndex: number) => {
        setActiveIndex(changeIndex);
        // setActiveParam(paramList[changeIndex]);
        setParamList(list => list.map((item, index) => {
            return {
                ...item,
                isActive: index === changeIndex
            };
        }));
    }

    const editAppName = (changeIndex: number, value: boolean) => {
        setActiveIndex(changeIndex);
        // setActiveParam(paramList[changeIndex]);
        setParamList(list => list.map((item, index) => {
            return {
                ...item,
                isActive: index === changeIndex,
                isEditAppName: index === changeIndex && value
            };
        }));
    }

    const editIntro = (changeIndex: number, value: boolean) => {
        setActiveIndex(changeIndex);
        // setActiveParam(paramList[changeIndex]);
        setParamList(list => list.map((item, index) => {
            return {
                ...item,
                isActive: index === changeIndex,
                isEditIntro: index === changeIndex && value
            };
        }));
    }

    const saveData = () => {
        const param = paramList[activeIndex];
        let editParam: CreateApplicationModal | CreateThirdApplication;
        if (menuData.type === WorkbenchesType.LOCAL) {
            editParam = param.localParam || emptyLocalParam;
        } else if (menuData.type === WorkbenchesType.THIRD) {
            editParam = param.thirdParam || emptyThirdParam;
        } else {
            return;
        }
        if (param.editMode === OperationType.NEW) {
            createData(activeIndex, editParam);
        } else {
            updateData(editParam);
        }
    }

    const createData = (index: number,param: CreateApplicationModal | CreateThirdApplication) => {
        if (!checkParam(param)) return;

        let cParam = {};
        if (menuData.type === WorkbenchesType.LOCAL) {
            const p = param as CreateApplicationModal;
            cParam = {
                name: p.name,
                intro: p.intro,
                model: p.model,
                prompt: p.prompt || "",
                maxImport: p.maxImport || maxImportModel.min.toString(),
                minAbout: p.minAbout || minAboutModel.min.toString(),
                datasetIds: p.datasetIds,
                checkModel: p.checkModel || SearchModes[0].value
            };
        } else if (menuData.type === WorkbenchesType.THIRD) {
            const p = param as CreateThirdApplication;
            cParam = {
                name: p.name,
                intro: p.intro,
                appType: p.appType,
                appUrl: p.appUrl,
                appKey: p.appKey,
                isTsoar: p.isTsoar || false,
                prompt: p.prompt || ""
            };
        }
        
        menuData.create({param: cParam}).then((res: ResponseModal<boolean>) => {
            if (res.code === 200 && res.success && res.result) {
                message.success("新建应用成功");
                // 更新保存状态
                // const param: ParamType = {
                //     ...paramList[index],
                //     saveStatus: SaveStatus.SAVED
                // }
                // if (activeIndex === index) setActiveParam(param);
                // updateParamList(index, param);
                goBack();
            } else if (res.message && res.message.length > 0) {
                message.error(res.message);
            } else {
                message.error("新建应用失败，未知原因");
            }
        }).catch((err) => {
            console.log("新建应用失败\n", err);
        })
    }

    const updateData = (param: CreateApplicationModal | CreateThirdApplication) => {
        if (!param.id) {
            message.error("id为空,无效应用");
            return;
        }
        if (!checkParam(param)) return;

        let uParam = {};
        if (menuData.type === WorkbenchesType.LOCAL) {
            const p = param as CreateApplicationModal;
            uParam = {
                id: p.id,
                name: p.name,
                intro: p.intro,
                model: p.model,
                prompt: p.prompt || "",
                maxImport: p.maxImport || maxImportModel.min.toString(),
                minAbout: p.minAbout || minAboutModel.min.toString(),
                datasetIds: p.datasetIds,
                checkModel: p.checkModel || SearchModes[0].value
            };
        } else if (menuData.type === WorkbenchesType.THIRD) {
            const p = param as CreateThirdApplication;
            uParam = {
                id: p.id,
                name: p.name,
                intro: p.intro,
                appType: p.appType,
                appUrl: p.appUrl,
                appKey: p.appKey,
                isTsoar: p.isTsoar || false,
                prompt: p.prompt || ""
            };
        }
        menuData.update({param: uParam}).then((res: ResponseModal<boolean>) => {
            if (res.code === 200 && res.success && res.result) {
                message.success("修改应用成功");
                // 更新保存状态
                // const param: ParamType = {
                //     ...paramList[index],
                //     saveStatus: SaveStatus.SAVED
                // }
                // if (activeIndex === index) setActiveParam(param);
                // updateParamList(index, param);
                goBack();
            } else if (res.message && res.message.length > 0) {
                message.error(res.message);
            } else {
                message.error("修改应用失败，未知原因");
            }
        }).catch((err) => {
            console.log("修改应用失败\n", err);
        });
    }

    const checkParam = (param: CreateApplicationModal | CreateThirdApplication):boolean => {
        if (!param.name.trim()) {
            message.error("请输入应用名称");
            return false;
        }
        if (menuData.type === WorkbenchesType.LOCAL) {
            const p = param as CreateApplicationModal;
            if (!p.model.trim()) {
                message.error("请选择 AI 模型");
                return false;
            }
        } else if (menuData.type === WorkbenchesType.THIRD) {
            const p = param as CreateThirdApplication;
            if (!p.appType.trim()) {
                message.error("请选择接口类型");
                return false;
            }
            if (!p.appUrl.trim()) {
                message.error("请选择接口地址");
                return false;
            }
            if (!p.appKey.trim()) {
                message.error("请选择接口Key");
                return false;
            }
        }
        return true;
    }

    const deleteData = (index: number, item: ParamType) => {
        const isGoBack = index === 0 && paramList.length <= 1;
        if (!item.localParam?.id) {
            removeParamList(index);
            if (isGoBack) goBack();
            return;
        }
        const param = {
            id: item.localParam.id
        }
        menuData.delete(param).then((res: ResponseModal<boolean>) => {
            if (res.code === 200 && res.success && res.result) {
                message.success("删除成功");
                if (isGoBack) goBack();
            } else if (res.message && res.message.length > 0) {
                message.error(res.message);
            } else {
                message.error("删除失败，未知原因");
            }
        }).catch((err) => {
            console.log("删除失败: \n", err);
        });
    }

    const getCardName = (item: ParamType) => {
        if (menuData.type === WorkbenchesType.LOCAL) {
            return item.localParam?.name;
        } else if (menuData.type === WorkbenchesType.THIRD) {
            return item.thirdParam?.name;
        }
        return undefined;
    }

    const getCardIntro = (item: ParamType) => {
        if (menuData.type === WorkbenchesType.LOCAL) {
            return item.localParam?.intro;
        } else if (menuData.type === WorkbenchesType.THIRD) {
            return item.thirdParam?.intro;
        }
        return undefined;
    }

    const getInterfaceTypeName = (key?: string) => {
        if (!key) return;
        return interfaceTypes.find(item => item.key === key)?.value;
    }

    const testInterface = () => {
        const testId = paramList[activeIndex]?.thirdParam?.id;
        if (!testId) {
            message.error("信息不全，无法测试");
        }
        sendTestMsg({msg: "你好", appId: testId}).then((res) => {
            console.log("msg res: \n", res);
        }).catch((err) => {
            console.log("发送消息失败\n", err);
        });
    }

    const getItemIsTsoar = () => {
        return paramList[activeIndex]?.thirdParam?.isTsoar || false;
    }

    const hiddenPopover = () => {
        setShowModelSelection(false);
        setShowSearchMode(false);
        setShowInterfaceType(false);
    }
    
    return (<>
        <div className="w-full h-full flex flex-col items-start justify-start gap-3 pt-3 pb-9 text-black" onClick={hiddenPopover}>
            <div className="w-full flex flex-row items-center justify-between">
                <div className="flex flex-row items-center justify-start gap-3">
                    <div className="cursor-pointer" onClick={goBack}>{menuData.name}</div>
                    <div className="text-gray-400">/</div>
                    <div className={`${data?.name && data.name.length <= 0 ? "text-gray-500": ""} w-36 text-nowrap overflow-hidden text-ellipsis`}>{data?.name || "新建应用"}</div>
                </div>
                <div className="hidden flex-row items-center justify-between">
                    <div className="text-blue-400 text-lg cursor-pointer">应用配置</div>
                </div>
                <div className="pl-28">
                    <div className="px-3 py-1 bg-blue-500 rounded-lg text-white cursor-pointer hover:bg-blue-500/90" onClick={saveData}>保存</div>
                </div>
            </div>
            <div className="w-full h-full flex flex-row items-start justify-start gap-6">
                <div className="w-full flex-[1] h-full flex flex-col items-center justify-center gap-3 shadow-inner shadow-gray-200 bg-gray-50 px-5 py-3 rounded-lg">
                    <div className="w-full flex flex-row items-center justify-between">
                        <div>应用列表</div>
                        <div>
                            <div className="flex flex-row items-center justify-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg cursor-pointer hover:bg-blue-600/90" onClick={() => {
                                let emptyParam: CreateApplicationModal | CreateThirdApplication = {...emptyLocalParam};
                                if (menuData.type === WorkbenchesType.THIRD) {
                                    emptyParam = {...emptyThirdParam};
                                }
                                addParamList({...emptyParam})
                                }}>
                                <div className="w-[14px] flex flex-row items-center justify-center"><AddSvg width={`100%`} height={`100%`} /></div>
                                <div className="">新建</div>
                            </div>
                        </div>
                    </div>
                    <div className="w-full border-b-2 border-b-gray-400 border-dashed"></div>
                    <div className="scrollbar-style w-full h-full overflow-y-auto p-2">
                        <div className="w-full flex flex-col items-center justify-center gap-3">
                            { paramList && paramList.map((item, index) => (
                                <>
                                    <div 
                                    key={`card_list_${index}`}
                                    className={`w-full flex flex-col items-start justify-center gap-3 bg-white border shadow-[0_0_5px_rgb(96,165,250,0.1)] ${item.isActive ? "shadow-blue-400 border-blue-400": "shadow-transparent border-gray-200"}  px-7 py-4 rounded-xl cursor-pointer hover:border-blue-400`}
                                    onClick={() => changeActive(index)}
                                    >
                                        <div className="w-full flex flex-row items-center justify-between">
                                            <div className="flex flex-row items-center justify-center gap-1">
                                                <div className="w-7 p-1 bg-blue-300 rounded-md text-white flex flex-row items-center justify-center"><SimpleAppSvg width={`100%`} height={`100%`} /></div>
                                                <div className="min-w-52 cursor-pointer border border-transparent rounded-lg px-3 py-1 has-[input:focus-within]:border-blue-500/60">
                                                    {
                                                        item.isEditAppName ? (
                                                            <input ref={appNameInput} type="text" autoFocus name="name" value={menuData.type === WorkbenchesType.THIRD ? item.thirdParam?.name : item.localParam?.name} placeholder="请输入名称" className="w-full h-full border-none outline-none bg-transparent" onBlur={() => {editAppName(index, false)}} onChange={(e) => {handleValueChange(index, e)}} />
                                                        ): (
                                                            <>
                                                                <div onClick={() => {editAppName(index, true);}} className={`${getCardName(item) ? "font-bold":"text-gray-400"}`}>{getCardName(item)|| "请输入名称"}</div>
                                                            </>
                                                        )
                                                    }
                                                    
                                                </div>
                                            </div>
                                            <div className="flex flex-row items-start justify-end">
                                                <div className={`${item.saveStatus === SaveStatus.EDITED ? "bg-gray-200 animate-pulse" : "bg-green-300"} rounded-md px-3 py-1`}>{SAVE_TEXT[item.saveStatus]}</div>
                                            </div>
                                        </div>
                                        <div className="w-full h-16 whitespace-pre-line break-words text-gray-500">
                                            <div className="w-full h-full cursor-pointer border border-transparent shadow-[0_0_5px] shadow-transparent rounded-lg px-3 py-1 has-[textarea:focus-within]:border-blue-500/60 has-[textarea:focus-within]:shadow-blue-500/60">
                                                {
                                                    item.isEditIntro ? (
                                                        <>
                                                            
                                                            <textarea autoFocus name="intro" value={menuData.type === WorkbenchesType.THIRD ? item.thirdParam?.intro : item.localParam?.intro} placeholder="请输入简介" className="w-full h-full border-none outline-none bg-transparent resize-none" onBlur={() => {editIntro(index, false)}} onChange={(e) => {handleValueChange(index, e)}}></textarea>
                                                            
                                                        </>
                                                    ): (
                                                        <>
                                                        <div className="w-full h-full" onClick={() => {editIntro(index, true)}}>{getCardIntro(item) || "暂无简介"}</div>
                                                        </>
                                                    )
                                                }
                                            </div>
                                        </div>
                                        <div className="w-full flex flex-row items-center justify-end">
                                        <Popover content={<>
                                                <div className="flex flex-col items-center justify-center gap-2 p-2 rounded-lg border border-gray-100 cursor-pointer">
                                                    <div 
                                                    className="w-full flex flex-row items-center justify-start gap-2 px-3 py-1 text-red-600 hover:bg-red-100 rounded-lg" 
                                                    onClick={() => deleteData(index, item)}
                                                    >
                                                        <div className="w-4 flex flex-row items-center justify-center"><DeleteSvg width={`100%`} height={`100%`}/></div>
                                                        <div>删除</div>
                                                    </div>
                                                </div>
                                            </>} 
                                            arrow={false} 
                                            trigger="hover" 
                                            placement="bottomLeft"
                                            overlayInnerStyle={{padding: 0,margin: 0}}
                                            getPopupContainer={(node) => node}>
                                            <div className="w-5 flex flex-row items-center justify-center cursor-pointer"><MoreSvg width={`100%`} height={`100%`} /></div>
                                        </Popover>
                                        </div>
                                    </div>
                                </>
                            ))}
                        </div>
                    </div>
                </div>
                <div className="scrollbar-style h-full flex-[2] flex flex-col items-start justify-start gap-3 bg-white px-7 py-4 rounded-xl overflow-y-auto">
                    {
                        menuData.type === WorkbenchesType.LOCAL && (<>
                            <div className="w-full flex flex-row items-center justify-start gap-2">
                                <div className="w-6 text-fuchsia-600 animate-pulse flex flex-row items-center justify-center"><AiV1Svg width={`100%`} height={`100%`} /></div>
                                <div className="font-bold">AI 配置</div>
                            </div>
                            <div className="w-full flex flex-col items-start justify-start gap-5">
                                <div className="w-full">
                                    <div className="flex flex-row items-start justify-start flex-wrap gap-5">
                                        <div className="flex-1 flex flex-col items-start justify-start gap-5">
                                            <div className="w-full flex flex-row items-center justify-between">
                                                <div className="w-fit text-nowrap mr-6">AI 模型</div>
                                                <Popover content={
                                                    <>
                                                        <div className="scrollbar-style w-full h-60 flex flex-col items-center justify-start gap-1 p-2 overflow-y-auto">
                                                            {
                                                                models?.map((item, index) => (
                                                                    <>
                                                                        <div 
                                                                        key={`model_${index}`} 
                                                                        className="w-full flex flex-row items-center justify-start px-3 py-3 rounded-md cursor-pointer hover:bg-gray-200 gap-2"
                                                                        onClick={() => {handleLocalParam({index: activeIndex, key: "model", value: item})}}
                                                                        >
                                                                            <div className="w-5 text-blue-600 flex flex-row items-center justify-center"><ModelV1Svg width={`100%`} height={`100%`} /></div>
                                                                            <div>{item}</div>
                                                                        </div>
                                                                    </>
                                                                ))
                                                            }
                                                        </div>
                                                    </>
                                                } 
                                                arrow={false} 
                                                open={showModelSelection}
                                                overlayInnerStyle={{padding: 0,margin: 0,width: "100%"}}
                                                overlayStyle={{width: "100%"}}
                                                getPopupContainer={(node) => node}
                                                >
                                                    <div className={`w-5/6 flex flex-row items-center justify-between relative border border-gray-300 shadow-[0_0_5px_rgb(96,165,250,0.1)] shadow-transparent rounded-md px-3 py-2 cursor-pointer hover:border-blue-300 ${showModelSelection ? "border-blue-300 shadow-blue-400/80": ""}`} onClick={(event) => {
                                                        event.stopPropagation();
                                                        hiddenPopover();
                                                        setShowModelSelection(!showModelSelection);
                                                        }}>
                                                        <div className="w-full flex flex-row items-center justify-start gap-2 rounded-md cursor-pointer">
                                                            {
                                                                paramList[activeIndex]?.localParam?.model ? (<>
                                                                    <div className="w-5 text-blue-600 flex flex-row items-center justify-center"><ModelV1Svg width={`100%`} height={`100%`} /></div>
                                                                    <div>{paramList[activeIndex]?.localParam?.model}</div>
                                                                </>):(<></>)
                                                            }
                                                        </div>
                                                        <div>
                                                            <DownArrowSvg />
                                                        </div>
                                                    </div>
                                                </Popover>
                                            </div>
                                            <div className="w-full flex flex-col items-start justify-center gap-2">
                                                <div className="flex flex-row items-center justify-center gap-3">
                                                    <div>提示词</div>
                                                    <Popover content={
                                                        <>
                                                            <div className="w-80 break-words whitespace-pre-line px-3 py-2">
                                                                {tips}
                                                            </div>
                                                        </>
                                                    }
                                                    trigger="hover"
                                                    overlayInnerStyle={{padding: 0, margin: 0}}
                                                    >
                                                    <div className="w-4 flex flex-row items-center justify-center cursor-pointer"><SvgQuest width={`100%`} height={`100%`} /></div>
                                                    </Popover>
                                                </div>
                                                <div className="flex flex-row items-center justify-center w-full h-56 p-3 rounded-lg border bg-gray-100 border-gray-200 shadow-[0_0_5px_rgb(96,165,250,0.1)] shadow-transparent hover:border-blue-400 has-[textarea:focus-within]:border-blue-400 has-[textarea:focus-within]:shadow-blue-400 has-[textarea:focus-within]:bg-white">
                                                    <textarea name="prompt" value={paramList[activeIndex]?.localParam?.prompt} placeholder={tips} onChange={(e) => handleValueChange(activeIndex, e)} className="scrollbar-style border-none outline-none w-full h-full bg-transparent resize-none" />
                                                </div>
                                            </div>
                                        </div>
                                        <div className="flex-1 w-full flex flex-col items-center justify-start">
                                            <div className="w-full flex flex-col items-start justify-start gap-5">
                                                <div className="w-full flex flex-row items-center justify-between">
                                                    <div className="h-full min-w-24 flex flex-row items-center justify-center gap-2">
                                                        <div className="w-7 flex flex-row items-center justify-center text-blue-300"><SearchModeSvg width={`100%`} height={`100%`} /></div>
                                                        <div>搜索模式</div>
                                                    </div>
                                                    <div className="w-2/3">
                                                        <Popover 
                                                        content={<>
                                                            <div className="w-full rounded-xl p-2">
                                                                <div className="flex flex-col items-start justify-center">
                                                                    {
                                                                        SearchModes.map((item,index) => (<>
                                                                            <div 
                                                                            key={`search_mode_item_${item.id}_${index}`}
                                                                            className="w-full flex flex-row items-center justify-start gap-2 cursor-pointer rounded-lg hover:bg-gray-200"
                                                                            onClick={() => {
                                                                                // setSearchMode(item);
                                                                                handleLocalParam({index: activeIndex, key: "checkModel", value: item.value, searchMode: item})
                                                                            }}
                                                                            >
                                                                                <div className="w-6 flex flex-row items-center justify-center py-1 text-blue-400/90">{item.icon}</div>
                                                                                <div className="h-16 flex flex-col items-start justify-center">
                                                                                    <div>{item.title}</div>
                                                                                    <div className="text-sm text-gray-400 leading-none">{item.desc}</div>
                                                                                </div>
                                                                            </div>
                                                                        </>))
                                                                    }
                                                                </div>
                                                            </div>
                                                        </>} 
                                                        arrow={false} 
                                                        open={showSearchMode}
                                                        overlayInnerStyle={{padding: 0, margin: 0}}
                                                        overlayStyle={{width: "100%"}}
                                                        getPopupContainer={(node) => node}
                                                        >
                                                            <div 
                                                            className="w-full relative flex flex-row items-center justify-between border border-gray-200 rounded-xl px-3 py-1 cursor-pointer hover:border-blue-300"
                                                            onClick={(event) => {
                                                                event.stopPropagation();
                                                                hiddenPopover();
                                                                setShowSearchMode(!showSearchMode);}}
                                                            >
                                                                <div className="flex flex-row items-center justify-center gap-2">
                                                                    <div className="w-6 flex flex-row items-center justify-center py-1 text-blue-400/90">{paramList[activeIndex]?.searchMode.icon}</div>
                                                                    <div className="h-16 flex flex-col items-start justify-center">
                                                                        <div>{paramList[activeIndex]?.searchMode?.title}</div>
                                                                        <div className="text-sm text-gray-400 leading-none">{paramList[activeIndex]?.searchMode.desc}</div>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <div className="w-5 flex flex-row items-center justify-center"><DownArrowSvg width={`100%`} height={`100%`} /></div>
                                                                </div>
                                                            </div>
                                                        </Popover>
                                                    </div>
                                                </div>
                                                <div className="w-full flex flex-col items-start justify-center gap-2">
                                                    <div className="h-full min-w-24 flex flex-row items-center justify-start gap-2">
                                                        <div className="w-7 flex flex-row items-center justify-center text-blue-300"><SearchFilteringSvg width={`100%`} height={`100%`} /></div>
                                                        <div>搜索过滤</div>
                                                    </div>
                                                    <div className="w-full flex flex-col items-center justify-center gap-2">
                                                        <div className="w-full flex flex-row items-center justify-between">
                                                            <div className="w-fit flex flex-row items-center justify-center gap-1 cursor-pointer">
                                                                <div className="text-nowrap">引用上限</div>
                                                                <Popover content={<>
                                                                        <div className="w-64">单次搜索最大的 token 数量，中文约 1 字=1.7 tokens，英文约 1 字=1 token</div>
                                                                    </>}
                                                                    trigger="hover"
                                                                    getPopupContainer={(node) => node}
                                                                    >
                                                                    <div className="w-4 flex flex-row items-center justify-center"><SvgQuest width={`100%`} height={`100%`} /></div>
                                                                </Popover>
                                                            </div>
                                                            <div className="w-3/4 flex flex-row items-center justify-end gap-2">
                                                                <div className="w-full">
                                                                    <Slider 
                                                                    min={maxImportModel.min} 
                                                                    max={maxImportModel.max} 
                                                                    step={maxImportModel.step} 
                                                                    value={Number(paramList[activeIndex]?.localParam?.maxImport || "0")}
                                                                    onChange={(newValue) => {
                                                                        handleLocalParam({index: activeIndex, key: "maxImport", value: newValue.toString()})
                                                                    }}
                                                                        />
                                                                </div>
                                                                <div>
                                                                    <InputNumber 
                                                                    min={maxImportModel.min} 
                                                                    max={maxImportModel.max} 
                                                                    step={maxImportModel.step}
                                                                    value={Number(paramList[activeIndex]?.localParam?.maxImport || maxImportModel.min.toString())}
                                                                    onChange={(newValue) => {
                                                                        const value = newValue || maxImportModel.min;
                                                                        handleLocalParam({index: activeIndex, key: "maxImport", value: value.toString()})
                                                                    }}
                                                                        />
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div className="w-full flex flex-row items-center justify-between">
                                                            <div className="w-fit flex flex-row items-center justify-center gap-1 cursor-pointer">
                                                                <div className="text-nowrap">最低相关度</div>
                                                                <Popover content={<>
                                                                        <div className="w-64">不同索引模型的相关度有区别，请通过搜索测试来选择合适的数值。</div>
                                                                    </>}
                                                                    trigger="hover"
                                                                    getPopupContainer={(node) => node}
                                                                    >
                                                                    <div className="w-4 flex flex-row items-center justify-center"><SvgQuest width={`100%`} height={`100%`} /></div>
                                                                </Popover>
                                                            </div>
                                                            {
                                                                paramList[activeIndex]?.searchMode.value === "embedding" ? (<>
                                                                        <div className="w-3/4 flex flex-row items-center justify-end gap-2">
                                                                            <div className="w-full">
                                                                                <Slider 
                                                                                min={minAboutModel.min} 
                                                                                max={minAboutModel.max} 
                                                                                step={minAboutModel.step} 
                                                                                value={Number(paramList[activeIndex]?.localParam?.minAbout || "0")}
                                                                                onChange={(newValue) => {
                                                                                    handleLocalParam({index: activeIndex, key: "minAbout", value: newValue.toString()})
                                                                                }}
                                                                                />
                                                                            </div>
                                                                            <div>
                                                                                <InputNumber 
                                                                                min={minAboutModel.min} 
                                                                                max={minAboutModel.max} 
                                                                                step={minAboutModel.step}
                                                                                value={Number(paramList[activeIndex]?.localParam?.minAbout || minAboutModel.min.toString())}
                                                                                onChange={(newValue) => {
                                                                                    const value = newValue || minAboutModel.min;
                                                                                    handleLocalParam({index: activeIndex, key: "minAbout", value: value.toString()})
                                                                                }}
                                                                                />
                                                                            </div>
                                                                        </div>
                                                                    </>) : (<>
                                                                        <div className="w-3/4 flex flex-row items-center justify-start">仅使用语义检索时，支持相关度过滤</div>
                                                                    </>)
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div className="w-full">
                                    <div className="flex flex-col items-start justify-between gap-3">
                                        <div className="flex flex-row items-center justify-center gap-2">
                                            <div className="w-5 text-violet-700/80 flex flex-row items-center justify-center"><DataSetSvg width={`100%`} height={`100%`} /></div>
                                            <div>关联知识库</div>
                                        </div>
                                        <div className="w-full flex flex-col items-center justify-start gap-3 px-3">
                                            <div className="w-full flex flex-row items-center justify-start flex-wrap gap-3">
                                                <div className="flex-1 flex flex-col items-start justify-start gap-2">
                                                    <div className="flex flex-row items-center justify-center gap-1">
                                                        <div>已选中的知识库</div>
                                                        <div>(<span className="text-green-600 font-bold shadow-md shadow-yellow-400">{paramList[activeIndex]?.shuttleLeft.length > 0 ? paramList[activeIndex]?.shuttleLeft[0].vectorModel: ""}</span>)</div>
                                                        <div>:</div>
                                                    </div>
                                                    <div className="scrollbar-style w-full h-52 px-4 py-2 border border-gray-300 rounded-lg shadow-[0_0_3px_rgb(96,165,250,0.1)] shadow-gray-300 overflow-y-auto hover:border-blue-400 hover:shadow-blue-400">
                                                        <div className="w-full h-fit grid grid-cols-4 gap-2">
                                                            {
                                                                paramList[activeIndex]?.shuttleLeft?.map((item, index) => (<>
                                                                        <Popover content={<>
                                                                                <div className="select-none">{item.name}</div>
                                                                            </>} trigger="hover" getPopupContainer={(node) => node}>
                                                                            <div key={`shuttle_left_${item.id}_${index}`} className="h-fit flex flex-row items-center justify-between gap-1 border rounded-md text-black/90 bg-white cursor-pointer px-2 py-1 shadow shadow-gray-200 hover:text-white/90 hover:bg-blue-300 hover:shadow-blue-200">
                                                                                <div className="text-nowrap overflow-hidden text-ellipsis select-none">{item.name}</div>
                                                                                <div 
                                                                                className="w-4 flex flex-row items-center justify-center border border-gray-200 rounded-full shadow-[0_0_3px_rgb(96,165,250,0.1)] shadow-transparent hover:border-blue-300 hover:bg-gray-400 hover:shadow-gray-100"
                                                                                onClick={() => moveShuttleRight(item)}
                                                                                >
                                                                                    <CloseSvg width={`100%`} height={`100%`} />
                                                                                </div>
                                                                            </div>
                                                                        </Popover>
                                                                </>))
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="w-7 flex flex-row items-center justify-center text-gray-500/70"><DoubleArrowV1Svg width={`100%`} height={`100%`} /></div>
                                                <div className="flex-1 flex flex-col items-start justify-start gap-2">
                                                    <div>待选的知识库:</div>
                                                    <div className="scrollbar-style w-full h-52 px-4 py-2 border border-gray-300 rounded-lg shadow-[0_0_3px_rgb(96,165,250,0.1)] shadow-gray-300 overflow-y-auto hover:border-blue-400 hover:shadow-blue-400">
                                                        <div className="w-fit h-fit flex flex-row items-start justify-start flex-wrap gap-2">
                                                            {
                                                                paramList[activeIndex]?.shuttleRight?.map((item, index) => (<>
                                                                        <Popover content={<>
                                                                                <div className="select-none">{item.name}</div>
                                                                            </>} 
                                                                            trigger="hover" getPopupContainer={(node) => node}>
                                                                            <div 
                                                                            key={`shuttle_left_${item.id}_${index}`} 
                                                                            className="w-56 h-fit flex flex-col items-center justify-center gap-5 border rounded-md text-black/90 bg-white cursor-pointer px-2 py-1 hover:text-white/90 hover:bg-blue-300"
                                                                            onClick={() => moveShuttleLeft(item)}
                                                                            >
                                                                                <div className="w-full h-fit flex flex-row items-center justify-start">
                                                                                    <div className="text-nowrap overflow-hidden text-ellipsis select-none">{item.name}</div>
                                                                                </div>
                                                                                <div className="w-full h-fit flex flex-row items-center justify-end">
                                                                                    <div className="text-xs text-nowrap text-gray-400 overflow-hidden text-ellipsis select-none">{item.vectorModel}</div>
                                                                                </div>
                                                                            </div>
                                                                        </Popover>
                                                                </>))
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="w-full border-b border-b-gray-200"></div>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </>)
                    }
                    {
                        menuData.type === WorkbenchesType.THIRD && (<>
                            <div className="w-full h-full flex flex-row items-start justify-center gap-3">
                                <div className="w-full flex-1 flex flex-col items-start justify-start gap-3">
                                    <div className="w-full flex flex-row items-center justify-between gap-10">
                                        <div className="text-base text-nowrap">接口类型：</div>
                                        <div className="w-full flex flex-row items-center justify-start ml">
                                            <Popover content={<>
                                                    <div className="scrollbar-style w-full max-h-96 flex flex-col items-center justify-center gap-1 px-3 py-2 overflow-y-auto">
                                                        {
                                                            interfaceTypes.length > 0 ? (<>
                                                                {
                                                                    interfaceTypes.map((item, index) => (<>
                                                                        <div 
                                                                        key={`interface_type_${item.key}_${index}`} 
                                                                        className="w-full flex flex-row items-center justify-center py-2 cursor-pointer select-none rounded-lg hover:bg-gray-200"
                                                                        onClick={() => handleThirdParam({updateIndex: activeIndex, key: "appType", value: item.key})}
                                                                        >{item.value}</div>
                                                                    </>))
                                                                }
                                                            </>):(<>
                                                                <div className="w-full text-center flex flex-row items-center justify-center select-none cursor-pointer">无数据</div>
                                                            </>)
                                                        }
                                                    </div>
                                                </>}
                                                arrow={false}
                                                open={showInterfaceType}
                                                trigger="click"
                                                overlayInnerStyle={{margin: 0, padding: 0, width: "100%"}}
                                                overlayStyle={{width: "100%"}}
                                                placement="bottom"
                                                getPopupContainer={(node) => node}
                                                >
                                                <div 
                                                className={`w-full max-w-xs relative flex flex-row items-center justify-between px-3 py-2 cursor-pointer border  shadow-[0_0_3px] ${showInterfaceType ? "border-blue-400 shadow-blue-400" : "shadow-transparent border-gray-300"} rounded-lg hover:border-blue-400`}
                                                onClick={(event) => {
                                                    event.stopPropagation();
                                                    hiddenPopover();
                                                    setShowInterfaceType(!showInterfaceType);
                                                }}
                                                >
                                                    <div>{getInterfaceTypeName(paramList[activeIndex]?.thirdParam?.appType)}</div>
                                                    <div className="w-5 flex flex-row items-center justify-center">
                                                        <DownArrowSvg width={`100%`} height={`100%`} />
                                                    </div>
                                                </div>
                                            </Popover>
                                        </div>
                                    </div>
                                    <div className="w-full flex flex-col items-start justify-center gap-2">
                                        <div className="text-base text-nowrap">接口地址:</div>
                                        <div className="w-full">
                                            <div 
                                            className="border border-gray-200 shadow-[0_0_3px] shadow-transparent rounded-lg px-4 py-2 hover:border-blue-400 has-[input:focus-within]:border-blue-400 has-[input:focus-within]:shadow-blue-400"
                                            >
                                                <input 
                                                name="appUrl" 
                                                type="text" 
                                                value={paramList[activeIndex]?.thirdParam?.appUrl} 
                                                className="w-full h-full border-none outline-none"
                                                onChange={(e) => handleValueChange(activeIndex, e)}
                                                />
                                            </div>
                                        </div>
                                    </div>
                                    <div className="w-full flex flex-col items-start justify-center gap-2">
                                        <div className="text-base text-nowrap">接口Key:</div>
                                        <div className="w-full">
                                            <div 
                                            className="border border-gray-200 shadow-[0_0_3px] shadow-transparent rounded-lg px-4 py-2 hover:border-blue-400 has-[textarea:focus-within]:border-blue-400 has-[textarea:focus-within]:shadow-blue-400"
                                            >
                                                <textarea 
                                                name="appKey"
                                                maxLength={maxAppKeyLength}
                                                value={paramList[activeIndex]?.thirdParam?.appKey}
                                                rows={3}
                                                className="scrollbar-style w-full border-none outline-none resize-none"
                                                onChange={(e) => handleValueChange(activeIndex, e)}
                                                />
                                            </div>
                                            <div className="w-full flex flex-row items-center justify-end">{paramList[activeIndex]?.thirdParam?.appKey.length} / {maxAppKeyLength}</div>
                                        </div>
                                    </div>
                                    <div className="w-full flex flex-col items-start justify-center gap-2">
                                        <div className="text-base text-nowrap">提示词:</div>
                                        <div className="w-full">
                                            <div 
                                            className="border border-gray-200 shadow-[0_0_3px] shadow-transparent rounded-lg px-4 py-2 hover:border-blue-400 has-[textarea:focus-within]:border-blue-400 has-[textarea:focus-within]:shadow-blue-400"
                                            >
                                                <textarea 
                                                name="prompt"
                                                value={paramList[activeIndex]?.thirdParam?.prompt}
                                                className="scrollbar-style w-full h-80 border-none outline-none resize-none"
                                                onChange={(e) => handleValueChange(activeIndex, e)}
                                                />
                                            </div>
                                            <div className="w-full flex flex-row items-center justify-end">{paramList[activeIndex]?.thirdParam?.prompt?.length || 0} 字</div>
                                        </div>
                                    </div>
                                    <div 
                                    className="w-full flex flex-row items-center justify-start gap-1 cursor-pointer"
                                    onClick={() => handleThirdParam({updateIndex: activeIndex, key: "isTsoar", value: !getItemIsTsoar()})}
                                    >
                                        <div className={`w-5 flex flex-row items-center justify-center ${getItemIsTsoar() ? "text-blue-500": ""}`}>{getActiveCheckItem(getItemIsTsoar())?.icon}</div>
                                        <div>是否对接tsoar</div>
                                    </div>
                                    {/* <div className={`w-full ${paramList[activeIndex]?.thirdParam?.id ? "flex" : "hidden"} flex-row items-center justify-end`}> */}
                                    <div className={`w-full hidden flex-row items-center justify-end`}>
                                        <div 
                                        className="flex flex-row items-center justify-center px-4 py-1 bg-blue-500 text-white rounded-lg cursor-pointer hover:bg-blue-500/90"
                                        onClick={testInterface}
                                        >
                                            测试
                                        </div>
                                    </div>
                                </div>
                                <div className="hidden w-full flex-1 h-full border border-gray-200 px-3 py-2 rounded-lg">
                                    <div className="font-bold">调试预览</div>
                                </div>
                            </div>
                        </>)
                    }
                </div>
            </div>
        </div>
    </>);
}

export {
    WorkbenchesDetail
}